<template>
  <div class="main">
    <div class="tan_chuang">
      <!-- 新建 -->
      <div class="main-el-row-header">
        <div class="header-title">
          <div class="hang_title">
            <div class="one_title">治理方案配置</div>
            <div class="you"></div>
          </div>
        </div>
        <el-row class="header-content">
          <!-- <el-col :span="3">
          <div style="float: right; margin-top: 3px">
            <el-button size="small" @click="">禁用</el-button>
            <el-button size="small" @click="dialogVisible = true" type="primary"
              >新增数据</el-button
            >
          </div>
        </el-col> -->

          <!-- <div class="form_div">
            <div>
              <div style="float: right; padding: 0 5px; margin-top: 3px">
                <el-button
                  size="small"
                  @click="dialogVisible = true"
                  type="primary"
                  >批量启动</el-button
                >
              </div>
            </div>

            <div>
              <div style="float: right; padding: 0 5px; margin-top: 3px">
                <el-button
                  size="small"
                  @click="dialogVisible = true"
                  type="primary"
                  >批量暂停</el-button
                >
              </div>
            </div>
          </div> -->
        </el-row>
      </div>
      <!-- label -->
      <div class="main-el-row-content">
        <el-table
          :data="showData"
          style="width: 100%"
          class="my-table"
          height="620px"
          :header-cell-style="{ color: '#84F2FF' }"
          :cell-style="{ color: '#84F2FF' }"
        >
          <el-table-column label="序号" width="100" type="index">
          </el-table-column>
          <el-table-column prop="schemaName" label="方案名称" min-width="180">
          </el-table-column>
          <el-table-column prop="formatConv" label="格式转换" min-width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.formatConv" class="duigou"></div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="wildValHandle"
            label="野值处理"
            min-width="180"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.wildValHandle" class="duigou"></div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column prop="setPk" label="设定主键" min-width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.setPk" class="duigou"></div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column prop="paramRange" label="范围检查" min-width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.paramRange" class="duigou"></div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column prop="missValueAdd" label="缺值增补" min-width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.missValueAdd" class="duigou"></div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column prop="label" label="数据标签" min-width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.label" class="duigou"></div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="editSource(scope.row, 'edit')"
                size="small"
                ><span class="el-icon-edit">编辑</span></el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="div-el-pagination" v-show="pageFlag">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            background
            layout="prev, pager, next, total, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 编辑 -->
      <el-dialog :visible.sync="dialogEdit" width="647px" height="395px">
        <div slot="title" class="dialog-title">
          <el-row class="red">
            <span class="dialog-title-text">质量方案设置</span>
            <span class="dialog-title-you"></span>
            <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
          </el-row>
        </div>
        <el-form :model="form3" label-width="120px" ref="form3">
          <el-form-item>
            <el-checkbox
              v-model="form3.formatConv"
              label="格式转换"
            ></el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-checkbox
              v-model="form3.wildValHandle"
              label="野值处理"
            ></el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="form3.setPk" label="设定主键"></el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-checkbox
              v-model="form3.paramRange"
              label="范围检查"
            ></el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-checkbox
              v-model="form3.missValueAdd"
              label="缺值补漏"
            ></el-checkbox>
            <el-select
              v-model="form3.zhi"
              placeholder="请选择活动区域"
              style="margin: 0 20px"
              :disabled="!form3.missValueAdd"
            >
              <el-option label="人工" value="0"></el-option>
              <el-option label="前值替代法" value="1"></el-option>
              <el-option label="后值替代法" value="2"></el-option>
              <el-option label="均值替代法" value="3"></el-option>
              <el-option label="插值替代法" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="form3.label" label="数据标签"></el-checkbox>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" class="bg_button" @click="dialogEdit = false"
            >取 消</el-button
          >
          <el-button
            size="small"
            class="bg_button"
            type="primary"
            @click="updateInfo('form3')"
            >确 认</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { post } from "../../utils/request";
export default {
  name: "CleaningDetection",
  data() {
    return {
      total: 0,
      pageFlag: true,
      pageSize: 11,
      currentPage: 1,
      showData: [],
      dataType: "",
      currentTime: "", // 当前时间
      dialogEdit: false,
      form3: {
        formatConv: false,
        label: false,
        missValueAdd: false,
        paramRange: false,
        setPk: false,
        wildValHandle: false,
        zhi: "",
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getDataGovSchemaList();
    },
    getDataGovSchemaList() {
      let that = this;
      var params = {
        pageSize: that.pageSize,
        pageNum: that.currentPage,
      };
      post("/api/idatamanage/dataGov/queryGovSchemaList", params).then(
        (res) => {
          // console.log("res=>", res.data.data);
          that.total = res.data.data.total;
          that.showData = res.data.data.dataList;
          for (let index = 0; index < that.showData.length; index++) {
            for (let i in that.showData[index]) {
              i;
              if (that.showData[index][i] == "1") {
                that.showData[index][i] = true;
              } else if (that.showData[index][i] == "0") {
                that.showData[index][i] = false;
              }
            }
            if (that.showData[index].schemaId == true) {
              that.showData[index].schemaId = 1;
            }
          }
        }
      );
    },
    editSource(scope) {
      let that = this;
      // console.log(scope.schemaId);
      that.dialogEdit = true;
      let linxun = that.showData;
      linxun.forEach((element) => {
        if (element.schemaId == scope.schemaId) {
          that.form3 = { ...element }; // 使用扩展运算符 将其存储的内存地址进行修改 使其form3 发生改变时 this.showData 不发生改变
        }
      });
      that.form3.formatConv = true;
      that.form3.setPk = true;
    },
    updateInfo() {
      // console.log("点击确定之后", this.form3);
      if (this.form3.formatConv == true && this.form3.setPk == true) {
        let params = [];
        params = this.form3;
        for (let i in params) {
          // console.log("键名：", i);
          if (params[i] == true) {
            params[i] = 1;
          } else if (params[i] == false) {
            params[i] = 0;
          }
          // console.log("键值：", params[i]);
        }
        // console.log(params);
        post("/api/idatamanage/dataGov/updateGovSchema", params).then(() => {
          // console.log("修改之后", res);
          this.dialogEdit = false;
          this.getDataGovSchemaList();
        });
      } else if (this.form3.formatConv == 0) {
        this.$message("格式转换为必选项");
      } else if (this.form3.setPk == 0) {
        this.$message("设定主键为必选项");
      }
    },
    // 分页数据的修改 选择那页并获取数据
    handleCurrentChange(currentPage) {
      this.listLoading = true;
      this.currentPage = currentPage;
      // console.log(this.currentPage); //点击第几页
      this.getDataGovSchemaList();
    },
  },
};
</script>

<style src="../../assets/css/common.css"></style>
<style lang="scss" scoped>
.main {
  // 最外层的盒子
  font-family: "宋体";
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 85vh;
}
::v-deep .el-table {
  th {
    background-color: red($color: #000000) !important;
  }
}
.el-form-item__label {
  color: #fff !important;
}
.header-content {
  height: 66px;
  padding: 10px 20px;
}

// ::v-deep .el-table .cell {
//   font-size: 18px;
//   color: #c4d1dd;
// }
.div-el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-table::before {
  content: "";
  position: absolute;
  background-color: transparent;
  z-index: 1;
}
::v-deep .el-table tr {
  background-color: transparent;
}

.el-dialog {
  background-color: rgba(8, 79, 140, 1);
}
// ::v-deep .el-table--striped {
//   .el-table__body {
//     tr.el-table__row--striped {
//       td.el-table__cell {
//         background: #0077a9;
//       }
//     }
//   }
// }
// ::v-deep .el-table--enable-row-transition {
//   .el-table__body {
//     td.el-table__cell {
//       background: #0c2d40;
//     }
//   }
// }
// ::v-deep.el-table__body {
//   .el-table__row.hover-row td {
//     background-color: #171f34;
//   }
// }
.duigou::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}
</style>